<template>
	<view>
		<view class="box">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="100">
				<u-form-item :required='true' label="头像" prop="info.head" borderBottom ref="item1">
					<view class="imgBox">
						<image class="busImg"
							:src="model1.info.head"
							@click="toCut(4)"></image>
					</view>
				</u-form-item>
				<u-form-item :required='true' label="昵称" prop="info.userName" borderBottom ref="item1">
					<u--input v-model="model1.info.userName" border="none" placeholder="请输入昵称"></u--input>
				</u-form-item>
				<u-form-item :required='true' label="性别" prop="info.sex" borderBottom ref="item1">
					<view class="radioBox">
						<u-radio-group v-model="model1.info.sex" placement="row">
							<u-radio :customStyle="{marginLeft: '20px'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.value" @change="groupChange">
							</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item :required='true' label="手机号" prop="info.phone" borderBottom ref="item1">
					<view class="" v-if="model1.info.phone">
						{{model1.info.phone}}
					</view>
					<button type="default" v-else class="butNumber" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber">请绑定手机号</button>
				</u-form-item>
			</u--form>
			<view class="subit" @click="submit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bindWinXinMobile,alterUserInfo
	} from "@/api/wine/wine.js"
	export default {
		data() {
			return {
				radiolist1: [{
						name: '男',
						value: 1,
					},
					{
						name: '女',
						value: 2,
					},
				],
				model1: {
					info: {
						head: '',
						userName: '',
						sex: '1',
						phone: ''
					},
				},
				rules: {
					'info.head': {
						type: 'string',
						required: true,
						message: '请选择您的头像',
						trigger: ['blur', 'change']
					},
					'info.userName': {
						type: 'string',
						required: true,
						message: '请输入您的昵称',
						trigger: ['blur', 'change']
					},
					'info.sex': {
						type: 'number',
						required: true,
						message: '请选择您的性别',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad() {
			this.model1.info.head = this.$store.getters.avatar
			this.model1.info.sex = this.$store.getters.sex
			this.model1.info.userName = this.$store.getters.name
			this.model1.info.phone = this.$store.getters.mobile
		},
		methods: {
			groupChange(n) {
				this.model1.info.sex = n
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					let that = this
					// console.log('shouji',e.detail.code)
					let data = {
						nickname: this.model1.info.userName,
						avatar:this.model1.info.head,
						sex:this.model1.info.sex
					}
					alterUserInfo(data).then(response => {
						uni.hideLoading()
						if (response.code == 0) {
							that.$store.dispatch('GetInfo').then(res => {
								uni.$u.toast('修改成功')
								that.$tab.navigateBack(1)
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast('请填写完整信息')
				})
			},
			toCut(e) {
				this.$tab.navigateTo('/pages/cut/cut?type=' + e)
			},
			decryptPhoneNumber(e) {
				let that = this
				// console.log('shouji',e.detail.code)
				let data = {
					code: e.detail.code
				}
				bindWinXinMobile(data).then(response => {
					uni.hideLoading()
					if (response.code == 0) {
						uni.$u.toast('绑定成功')
						that.$store.dispatch('GetInfo').then(res => {
							that.model1.info.phone = res.mobile
						})
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.box {
		width: 690rpx;
		height: fit-content;
		padding-bottom: 80rpx;
		margin: 0 auto;
	}

	.radioBox {
		width: 200rpx;
		height: 100%;
		margin-left: -30rpx;
	}

	.imgBox {
		width: 480rpx;
		padding-bottom: 20rpx;
		height: fit-content;
		display: flex;
		/* justify-content: flex-end; */
	}

	.subit {
		width: 690rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		border-radius: 50rpx;
		background-color: #E84E22;
		margin-top: 30rpx;
	}

	.busImg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #999;
	}

	.butNumber {
		width: 100%;
		height: 100%;
		border: none;
	}
</style>